<template>
    <div class="search_part">
        <span>搜索: </span>
        <el-input :placeholder="plh_a"></el-input>
        <el-input :placeholder="plh_b"></el-input>
        <el-input :placeholder="plh_c"></el-input>
        <el-select v-model="label" placeholder="请选择">
            <el-option 
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value = "index"
                ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
    </div>
</template>

<style lang="scss">
    .search_part {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        span {
            font-size: 15px;
            margin-right: 20px;
        }
        .el-input  {
            width: 180px;
            margin-right: 20px;
            .el-input__inner {
                height: 32px;
            }
        }
        .el-button {
            padding: 8px 0px;
            i {
                margin-left: 7px;
            }
        }
        .el-input__suffix {
            margin: 4px -22px 0px 0px;
        }
    }    
</style>

<script>
export default {
  
    props: ['plh_a', 'plh_b', 'plh_c'],
    data() {
        return {
            label: '',
            options: [
                { label: '现金'},
                { label: '支付宝'},
                { label: '微信'},
                { label: 'POS通'},
                { label: '闪付'},
                { label: 'POS通C扫B'},
                { label: '银联二维码'},
                { label: '会员余额支付'},
            ]
        }
    },
    methods: {
        add() {
            this.$store.state.dialogVisible = true;
            this.$store.commit('hd', ['添加', '/pay/pays/add']);
        }
    }
}
</script>